<template>
    <div id="algorithm-management" class="w-h-100 pos-r flex-1 apply-container" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item>
                            <el-input v-model="transferVal" placeholder="名称" clearable />
                        </el-form-item>
                        <el-form-item >
                            <el-button @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                            <el-button @click='searchClick' type="primary" icon="ele-Search"> 查询 </el-button>
                            <el-button @click="showAddDialogHandler" icon="ele-Plus" type="primary"> 新增 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">
                                        <el-table-column type="index" label="序号" width="55" align="center" :index="indexMethod" />
                                        <el-table-column prop="v_Name" label="名称"  align="center">
                                            <template #default="scope">
                                                <span class="title-stl" @click="showDetailDialogHandler(scope.row)"> {{scope.row.v_Name}} </span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="v_ModelName" label="模型名称" align="center" />
                                        <el-table-column prop="n_Version" label="版本" align="center" />
                                        <el-table-column prop="v_Remark" label="备注" align="center" />
                                        <el-table-column label="操作" align="center" >
                                            <template #default="scope">
                                                <el-button @click="showEditDialogHandler(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary"> 编辑 </el-button>
                                                <el-button @click="deleteHandle(scope.row.n_Id , getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger"> 删除 </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        
        <add-model
            v-if="isShowAddDialog"
            :isShowDialog="isShowAddDialog"
            @updateData="getData"
            @close="closeAddDialogHandler"
        />

        <edit-model
            v-if="isShowEditDialog"
            :isShowDialog="isShowEditDialog"
            :item="currentItem"
            @updateData="getData"
            @close="closeEditDialogHandler"
        />

        <detail-model
            v-if="isShowDetailDialog"
            :isShowDialog="isShowDetailDialog"
            :item="currentItem"
            @close="closeDetailDialogHandler"
        />

    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted , reactive } from 'vue'
import getTableData from '/@/utils/getTableData'
import { QueryPageList, Delete } from '/@/api/its/model'
import AddModel from './component/add-model.vue'
import EditModel from './component/edit-model.vue'
import DetailModel from './component/detail-model.vue'
import { ElMessageBox , ElMessage } from 'element-plus'
export default defineComponent( {
    name: 'model-management',
    components: { AddModel, EditModel, DetailModel },
    setup(props){
        
        //当前操作数据行
        const currentItem: any = ref<any>({});

        //==================================================
        //控制添加对话框显示隐藏
        const isShowAddDialog = ref();
        //显示添加对话框
        const showAddDialogHandler = () => {
            isShowAddDialog.value = true
        }
        //关闭添加对话框
        const closeAddDialogHandler = () => {
            isShowAddDialog.value = false
        }
        //==================================================
        //控制修改对话框显示隐藏
        const isShowEditDialog = ref();
        //显示修改对话框
        const showEditDialogHandler = (row: any) => {
            currentItem.value.n_Id = row.n_Id
            currentItem.value.v_Name = row.v_Name
            isShowEditDialog.value = true
        }
        //关闭修改对话框
        const closeEditDialogHandler = () => {
            isShowEditDialog.value = false
            currentItem.value = {};
        }

        //==================================================
        //控制详情对话框显示隐藏
        const isShowDetailDialog = ref();
        //显示详情对话框
        const showDetailDialogHandler = (row: any) => {
            currentItem.value.n_Id = row.n_Id
            currentItem.value.v_Name = row.v_Name
            isShowDetailDialog.value = true
        }
        //关闭详情对话框
        const closeDetailDialogHandler = () => {
            isShowDetailDialog.value = false
            currentItem.value = {};
        }

        //==================================================
        
        //搜索串
        const transferVal = ref()
        //搜索param
        const searchObj:any = reactive({})

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            resetFun()
            searchObj.v_Name = transferVal.value
        }

        /*** resetFun */
        const resetFun = () => {
            let newObj = Object.keys(searchObj)
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                })
            }
        }

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            resetFun()
            transferVal.value = ''
        }

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number , updateFun: Function) => {
            ElMessageBox.confirm('请确定是否删除此条数据','警告',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {n_Id : val}
                try {
                    let res: any = await Delete(param)
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }

        /*** onMounted 页面加载时显示 */
        onMounted(() => {})

        return {
            ...getTableData(QueryPageList,{},searchObj),
            deleteHandle,
            resetClick,
            searchClick,

            currentItem,
            isShowAddDialog,
            showAddDialogHandler,
            closeAddDialogHandler,
            isShowEditDialog,
            showEditDialogHandler,
            closeEditDialogHandler,
            isShowDetailDialog,
            showDetailDialogHandler,
            closeDetailDialogHandler,

            transferVal,
        }
    },
} )
</script>
<style scoped lang="scss">
    #algorithm-management {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        ul {

            list-style: none;

            li {
                cursor: pointer;

                &:hover {
                    color: red;
                }
            }
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
        .title-stl {
            color: #0052D9;
            text-decoration: underline;

            &:hover {
                text-decoration: none;
                cursor: pointer;
            }
        }
    }
</style>